<template>
  <div class="row q-gutter-sm text-green-14 items-center">
    <q-circular-progress
      :value="battery"
      show-value
      size="2rem"
      :thickness="0.2"
    >
      <q-icon name="battery_std" size="1rem" />
    </q-circular-progress>
    <div class="text-bold text-center">{{ battery }}%</div>
  </div>
</template>

<script setup>
defineProps({
  battery: { type: Number, default: -1 },
});
</script>

<style scoped></style>
